Visual Composer : Portfolio and Gallery with Carousel

• created: 04/06/2016
• latest update: 04/06/2016
• by: Saragna

Thank you for buying Visual Composer : Portfolio and Gallery with Carousel.

In order to get this product working flawlessly, please ensure that all the minimum requirements as specified below will be satisfied.

• Wordpress - Version 4.0 & above.
• PHP - 5.2 or above
• WPBakery Visual Composer - Version 4.0 & above

Installing Through Dashboard:

This part of the documentation is going to cover, in a step by step instruction the installation of WP Plugins on your WordPress blog in general.

Step 1. The most important task is to make certain you have an upto date backup of your blog! This is always a good thing, not necessarily so important for our plugin but in general. Step 2. Log into your WordPress Admin area. Step 3. Look down the left hand column for "Plugins" and then click on the word "Plugins". Step 4. Just to the right of the title “(Manage) Plugins” in the image above, you can see a button marked "Add New", click this button.

Plugin Upload

Step 5. The image above shows the option to upload the plugin from your own PC, this is the svc-portfolio.zip inside the zip you had previously downloaded from CodeCanyon. Install the zip and click on "Activate Plugin".

Plugin activation

Installibg by FTP

First, you need a tool for uploading plugin files to your site, you can use filemanager from cPanel or any FTP clients. Some good FTP clients :

• Download svc-portfolio.zip from CodeCanyon
• Extract the svc-portfolio directory to your computer
• Upload the svc-portfolio directory to the /wp-content/plugins/ directory
• Activate the plugin in the Plugin dashboard

Also WordPress codex contains instructions on how to do this here.

Visual Composer is a basic drag and drop page builder plugin and a modeling tool that enables code-free composition of UI elements, Enterprise Services, and reusable components to rapidly create and adapt rich user interfaces on your WordPress website.

To start using Visual Composer, follow these simple steps:

1. Add a new page/post or edit the existing one.
2. Observe the Visual Composer button to start designing custom pages from their Frontend/Backend/Classic editor. Screenshot
3. The Visual Composer Backend Editor page will look something like this
4. Click "Add Element" to start using the elements directly or click "Add row" to define your grid structure.

Using the newly Added feature of Frontend Editor:

1. Visual Composer’s version 4.0 and above have a new feature of Frontend editor.
2. Easy to use.
3. Click on the edit button against the specific element to edit its properties.

For more help about Visual Composer, refer WPBakery's own documentation here

1. If you click "Add Element" in Visual Composer a jQuery popup box will appear. 
2. Click on "All in One Grid" which is a dedicated tab for our plugin. A list of all the elements that our plugin provides will appear.
3. Select the element that you want to use.

Easily set a custom color per Post Category and use the colors in your WordPress templates to spice up your theme.

Category Color Available in below post type

• Post
• Portfolio
• Woocommerce

Features

• Responsive Layout.
• 4 Style Available
• Custom background Color and hover background color
• Infinite scroll: load more content simply by scrolling to the bottom of the page.
• Customize Front Colors
• Choose from expert-designed templates or customize fonts, colors, backgrounds, and more.
• Custom Feed Grid Layouts. (1 Columns,2 Columns,3 Columns,4 Columns)
• Carousel
• 35+ hover effect

This addons will add a responsive portfolio grid in your WordPress site. Highly customizable. Option for choosing custom post type for portfolio.

Portfolio Single page Shortcodes

Backend Options -

General Settings

Setting Title	Description	Default	Possible Values
Title	Enter Post grid title.
Skin type	Choose svc type.	Grid Layout	Grid LayoutCarousel
Build Post Query	Create WordPress loop, to populate content from your site.
Skin type	Choose skin type for grid layout.		Style1Style2Style3Style4
Portfolio Hover Effect	Choose Portfolio Hover Effect.	fade	fadepush-uppush-downpush-leftpush-rightslide-upslide-downslide-leftslide-righthinge-uphinge-downhinge-lefthinge-rightflip-horizflip-vertflip-diag-1flip-diag-2shutter-in-horizshutter-in-vertshutter-in-out-horizshutter-in-out-vertshutter-in-out-diag-1shutter-in-out-diag-2fold-upfold-downfold-leftfold-rightzoom-inzoom-outzoom-out-upzoom-out-downzoom-out-leftzoom-out-rightzoom-out-flip-horizzoom-out-flip-vertblur
Items Display	This variable allows you to set the maximum amount of items displayed at a time with the widest browser width.(Only for svc type = carousel)	4
Show pagination	Show pagination(Only for svc type = carousel)	unchecked	Yes(checked)
Show pagination Numbers	Show numbers inside pagination buttons.(Only for svc type = carousel)	unchecked	Yes(checked)
Hide navigation	Display "next" and "prev" buttons.(Only for svc type = carousel)	unchecked	Yes(checked)
AutoPlay	Set Slider Autoplay.(Only for svc type = carousel)	unchecked	Yes(checked)
AutoPlay Time(Visible only autoplay "yes")	Set Autoplay slider speed.(Only for svc type = carousel)	5
Show more	add Show more Post last element of Carousel.(Only for svc type = carousel)	unchecked	Yes(checked)
Synced Slider(Only for svc type = carousel and Items Display = 1)	Set Synced Slider.see Example here	unchecked	Yes(checked)
Synced Display(Synced Slider "yes")	Set Synces Slider Display elements.(Only for svc type = carousel)	10
Desktop Columns Count	Choose Desktop(PC Mode) Columns Count.(not allow for style6)	3 Columns	1 Column2 Columns3 Columns4 Columns
Tablet Columns Count	Choose Tablet Columns Count.(not allow for style6)	2 Columns	1 Column2 Columns3 Columns4 Columns
Mobile Columns Count	Choose Mobile Columns Count.(not allow for style6)	1 Columns	1 Column2 Columns3 Columns4 Columns
Show filter	Select to add animated category filter to your posts grid.	unchecked	Yes(checked)
Show Sorting Filter	Display Sorting Filter.	unchecked	Yes(checked)
Show Grid/List View Type Filter	Display Grid/List View Filter.	unchecked	Yes(checked)
Filter mode	if select Show filter : yes then display this section,Filter Layout Option.	Dropdown	DropdownLiner List
Show Filter value counter	if select Show filter : yes then display this section,Filter category Count display.		Yes(checked)
Layout mode	Select layout template.	Fit Row	Fit RowMasonry
Thumbnail size	Enter thumbnail size. Example: thumbnail, medium, large, full or other sizes defined by current theme. Alternatively enter image size in pixels: 200x100 (Width x Height).		thumbnail, medium, large, full, other sizes defined by current theme : 200x100
Excerpt Length	set excerpt length.default:20	20
Pagination Style	Select Pagination Style	Show more	Show moreInfinite ScrollNumber Pagination
Hide Show more Button	hide Show more button.this option only for Show more pagination.	unchecked	Yes(checked)
Post load Effect	Select post load effect.	None	NonebounceflashpulserubberBandshakeswingtadawobblebounceInbounceInDownbounceInLeftbounceInRightbounceInUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigflipflipInXflipInYlightSpeedInrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightslideInUpslideInDownslideInLeftslideInRightzoomInzoomInDownzoomInLeftzoomInRightzoomInUprollIntwisterInDowntwisterInUpswappuffInvanishInopenDownLeftRetournopenDownRightRetournopenUpLeftRetournopenUpRightRetournperspectiveDownRetournperspectiveUpRetournperspectiveLeftRetournperspectiveRightRetournslideDownRetournslideUpRetournslideLeftRetournslideRightRetournswashInfoolishIntinRightIntinLeftIntinUpIntinDownInboingInUpspaceInUpspaceInRightspaceInDownspaceInLeft
Hover Effect	Select portfolio hover effect.	None	None
Show more text	add Show more button text.Default:Show More		Enter any text
Quick View text	add Quick View button text.Default:Quick View		Enter any text
Extra class name	If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.		Add any class name for custom css

Display Settings

Setting Title	Description	Default	Possible Values
Title Link	set title link in single portfolio page. for single portfolio page use below shortcode. for Justified Gallery [vc_portfolio] for Carousel [vc_portfolio type="slider" desktop="10" tablet="6" mobile="3" color="#869791"]	unchecked	Yes(checked)
Hide Excerpt	hide Excerpt content.	unchecked	Yes(checked)
Hide Category	hide category Section.	unchecked	Yes(checked)
Category Color	show category background color.	unchecked	Yes(checked)
Category bottom Color	show category bottom color.	unchecked	Yes(checked)
Category bottom gradian Color	show multipul category gradiant color.	unchecked	Yes(checked)
Category line Height	Category line Height.	3
Hide Social	hide Social icon.	unchecked	Yes(checked)

Color Settings

Setting Title	Description	Default	Possible Values
Post Background Color	set each post background color.		any color select on color picker
Post hover Background Color	set each post hover background color.		any color select on color picker
Image below / top line color	set Image below / top color.(This option only for style1,style2 and style4)		any color select on color picker
Title Color	Set Title Color		any color select on color picker
Title Hover Color	Set Title Hover Color		any color select on color picker
Show More Color	Set Show More Color		any color select on color picker
Filter text and border color	Set Filter text and border color		any color select on color picker
Active Filter text color	Set Active Filter text color		any color select on color picker
Active Filter text background color	Set Active Filter text background color		any color select on color picker
Rating Color	Set Rating color		any color select on color picker
Pagination background color	set Pagination background color.		any color select on color picker
Pagination active background color	set Pagination active background color.		any color select on color picker
Pagination Number color	set Pagination Number color.		any color select on color picker
Navigation and Pagination color	Set Navigation and pagination color.(Only for svc type = carousel)		any color select on color picker

Features

• Responsive Feed Layout.
• 5 Grid Block Available
• 2 style available

Backend Options -

General Settings

Display Settings